<template>
	<view>
		
		<image @click="back" src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/back%402x.png" mode="" class="back" :style="{top:BarTop + 'px'}"></image>
			
		<view class="maxbox" :style="{marginTop:BarTop + BarHeight + 2+ 'px'}">
			<view style="width: 100%;height: 1px;"></view>
			<view class="maxbox-top">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/quxiao%402x.png" mode="" style="width: 64rpx;height: 64rpx;"></image>
				<view class="maxbox-top-sp">
					已取消
				</view>
			</view>
			<view class="maxbox-top-title">
				该订单已取消
			</view>
		</view>
		<view class="top">
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/Group%203451%402x.png" mode="" class="icon"></image>
			<view class="address">
				{{data.address.address}}
			</view>
			<view class="namebox">
				<view class="name">{{data.address.name}}</view>
				<view class="phone">{{data.address.mobile}}</view>
			</view>
			<!-- <view class="top-btn" @click="changeaddress">
				修改
			</view> -->
			
		</view>
		<view class="main1">
			<view style="width: 100%;height: 30rpx;"></view>
			<view class="main-store">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Frame%402x.png" mode="" style="width: 26rpx;height: 26rpx;"></image>
				<view class="store-name">
					{{data.shop_id?data.shop_id:'逸合峰绿色驿站'}}
				</view>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/right.png" mode="" style="width: 9rpx;height: 17rpx;margin-left: 10rpx;"></image>
			</view>
			<view class="store-main" @click="GotoGoodInfo(data)">
				<image :src="data.goods[0].image" mode="" style="width: 144rpx;height: 144rpx;"></image>
				<view class="store-right">
					<view class="right-top">
						{{data.goods[0].title}}
					</view>
					<view class="right-center">
						{{data.goods[0].difference}}
					</view>
					<view class="right-money">
						<text style="font-size: 24rpx;">￥</text>{{data.goods[0].actual_payment}}
					</view>
					<view class="right-num">
						<view class="num-sp">
							× {{data.goods[0].number}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="moneyInfo">
			<view class="InfoTitle">
				<view class="Infoname">
					商品金额
				</view>
				<view class="InfoMoney">
					<text style="font-size: 24rpx;">￥</text>{{data.pay.price}}
				</view>
			</view>
			
			<view class="InfoTitle" style="margin-top: 20rpx;">
				<view class="Infoname">
					运费
				</view>
				<view class="InfoMoney">
					<text style="font-size: 24rpx;">￥</text>0
				</view>
			</view>
			
			<view class="InfoTitle" style="margin-top: 20rpx;">
				<view class="Infoname">
					购物券
				</view>
				<view class="InfoMoney">
					<text style="font-size: 24rpx;color: #FD563D;">-￥{{data.pay.coupon_price}}</text>
				</view>
			</view>
		</view>
		
		<view class="Pay">
			<view style="width: 100%;height: 1rpx;"></view>
			<view class="number">
				<view class="numtitle">
					订单编号
				</view>
				<view class="num">
					{{data.order_no}}
				</view>
				<view class="numcopy" @click="COPY(data.order_no)">
					复制
				</view>
			</view>
			<view class="number">
				<view class="numtitle">
					下单时间
				</view>
				<view class="num" style="width:505rpx ;">
					{{data.createtime_text}}
				</view>
				
			</view>
			<view class="number">
				<view class="numtitle">
					付款方式
				</view>
				<view class="num" style="width:505rpx ;">
					在线支付
				</view>
				
			</view>
			<view class="number">
				<view class="numtitle">
					配送方式
				</view>
				<view class="num" style="width:505rpx ;">
					快递运输
				</view>
				
			</view>
		</view>
		
		<view style="width: 100%;height: 116rpx;"></view>
		<view class="Btn">
			<view class="Btntitle"></view>
			<view class="Btntitle1" @click="Delete()">
				删除订单
			</view>
			<view class="Btntitle2 " @click="GotoInfo">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/twopay%402x.png" mode="" style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		
		<u-modal v-model="show1" :content="content1" :show-cancel-button='true' @cancel='can1' @confirm='confirm1' cancel-text='再看看'></u-modal>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:1,
				manner:2,
				show: false,
				price:'',
				data:'',
				Quan:'',
				QuanData:'',
				show1:false,
				QuanNum:[],
				Quanflag:false,
				addData:'',
				BarTop:'',
				content1:'确认删除本订单？',
				BarHeight:'',
			}
		},
		 computed: {
		    totalPrice() {
		      // 使用reduce方法累加数组中每个对象的price属性值
		      return this.QuanNum.reduce((accumulator, currentItem) => accumulator + (currentItem.money-0), 0);
		    },
			    finalAmount() {
			      // 商品原价为数量乘以单价
			      const originalAmount = this.number * this.price;
			      // 实际支付金额为商品原价减去优惠总金额
				   const preciseFinalAmount = parseFloat((originalAmount - this.totalPrice).toFixed(2));
				    return preciseFinalAmount;
			    },
		  },
		  onShow() {
			 this.$u.api.shop.getOrderInfo({id:this.order_id}).then(res =>{
			 	if(res.code == 1){
			 		this.data = res.data
			 	}
			 })
		  },
		onLoad(option) {
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		   this.BarTop = menuButtonInfo.top;
		   this.BarHeight = menuButtonInfo.height;
		this.order_id = option.order_id
		this.$u.api.shop.getOrderInfo({id:option.order_id}).then(res =>{
			if(res.code == 1){
				this.data = res.data
			}
		})
		},
		methods:{
			GotoGoodInfo(item){
				uni.navigateTo({
					url:`./product?id=${item.goods[0].goods_id}`
				})
			},
			GotoInfo(){
				uni.navigateTo({
					url:`./product?id=${this.data.goods[0].goods_id}`
				})
			},
			Delete(){
				this.show1 = true
			},
			can1(){
				this.show1=false
			},
			confirm1(){
				this.$u.api.shop.DeleteOrder({id:this.data.id}).then(res =>{
					if(res.code == 1){
						uni.showToast({
						    title: '删除成功！',
						    icon: 'success'
						})
						this.back()
					}
				})
			},
			
			back(){
				uni.navigateBack({
				    delta: 1,
				})
			},
		
			PayQuan(index,val){
				    const index1 = this.QuanNum.findIndex(item => item.id === val.id);
				    
				    if (index1 !== -1) {
				      this.QuanNum.splice(index1, 1);
				    } else {
				      this.QuanNum.push(val);
				    }
			},
			changeaddress(){
				uni.navigateTo({
					url:`../../pageA/address/index?she=${true}&order_id=${this.data.id}&page=${3}`
				})
			},
			valChange(e) {
			},
			change(index){
				this.manner = index
			}
		}
	}
</script>

<style>
	.maxbox{
		width: 100%;
		height: 150rpx;
		/* position: relative; */
		
	}
	.maxbox-top{
		width: 720rpx;
		height: 64rpx;
		margin-left: 24rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}
	.maxbox-top-sp{
		height: 46rpx;
		font-size: 48rpx;
		color: black;
		font-weight: bold;
		margin-left: 6rpx;
		line-height: 46rpx;
	}
	.maxbox-top-title{
		width: 720rpx;
		margin-left: 24rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666666;
	}
	.top{
		width: 692rpx;
		height: 175rpx;
		margin-left: 30rpx;
		margin-top: 40rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/Group%203388%402x.png') center/cover;
		position: relative;
	}
	.address{
		width: 450rpx;
		height: 72rpx;
		position: absolute;
		top: 28rpx;
		left: 66rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold;
		color: black;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
		/* border: 1px red solid; */
		/* font-weight: bold; */
	}
	.icon{
		position: absolute;
		top: 33rpx;
		left: 26rpx;
		width: 28rpx;
		height: 28rpx;
	}
	.back{
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		z-index: 999;
		left: 24rpx;
	}
	.namebox{
		width: 500rpx;
		height: 24rpx;
		position: absolute;
		display: flex;
		left: 66rpx;
		top: 120rpx;
	}
	.name{
		height: 24rpx;
		/* background-color: yellow; */
		line-height: 24rpx;
		font-size: 28rpx;
		color: #444444;
		font-family: PingFang SC-Medium;
	}
	.phone{
		height: 24rpx;
		/* background-color: yellow; */
		line-height: 24rpx;
		font-size: 28rpx;
		color: #444444;
		font-family: D-DIN Exp-Regular;
		margin-left: 10rpx;
	}
	.top-btn{
		width: 108rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 2rpx #CDCDCD solid;
		text-align: center;
		line-height: 60rpx;
		position: absolute;
		top: 28rpx;
		right: 30rpx;
		font-size: 24rpx;
		color: #2D2D2D;
		font-family: PingFang SC-Medium;
		font-weight: Medium;
	}
	.main1{
		width: 690rpx;
		height: 320rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		position: relative;
	}
	.main-store{
		width: 662rpx;
		height: 26rpx;
		margin-left: 28rpx;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
	}
	.store-name{
		min-width: 140rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
		line-height: 24rpx;
	}
	.store-main{
		width: 630rpx;
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
		margin-top: 58rpx;
	}
	.store-right{
		width: 474rpx;
		height: 144rpx;
		position: relative;
		/* background-color: skyblue; */
	}
	.right-top{
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: black;
		overflow:hidden;
		 white-space: nowrap;
		 text-overflow: ellipsis;
		 -o-text-overflow:ellipsis;
	}
	.right-center{
		width: 100%;
		height: 20rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		color: #888888;
		margin-top: 20rpx;
	}
	.right-money{
		min-width: 130rpx;
		height: 28rpx;
		font-size: 36rpx;
		color: #192524;
		position: absolute;
		bottom: 5rpx;
		line-height: 28rpx;
	}
	.right-num{
		width: 170rpx;
		height: 44rpx;
		position: absolute;
		bottom: 0rpx;
		right: 30rpx;
	}
	.main-bot{
		width: 630rpx;
		height: 64rpx;
		background-color: #FAFAFA;
		border-radius: 8rpx;
		position: absolute;
		bottom: 20rpx;
		left: 30rpx;
		display: flex;
		align-items: center;
	}
	.car{
		width: 26rpx;
		height: 26rpx;
		margin-left: 14rpx;
	}
	.bot-time{
		width: 222rpx;
		height: 22rpx;
		line-height: 22rpx;
		font-size: 24rpx;
		color: #909090;
		margin-right: 30rpx;
	}
	.bot-title{
		width: 330rpx;
		height: 20rpx;
		line-height: 20rpx;
		font-size: 22rpx;
		color: #303030;
		margin-left: 8rpx;
	}
	.moneyInfo{
		width: 690rpx;
		height: 200rpx;
		margin-left: 30rpx;
		border-radius: 16rpx;
		margin-top: 20rpx;
		background-color: white;
		padding: 30rpx;
	}
	.InfoTitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.Infoname{
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
	}
	.InfoMoney{
		font-size: 32rpx;
		color: #192524;
	}
	.span{
		width: 630rpx;
		height: 128rpx;
		background-color: #F6F6F6;
		border-radius: 16rpx;
		margin-top: 30rpx;
	}
	.span1{
		width: 570rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #222222;
		margin-top: 24rpx;
	}
	.Pay{
		width: 690rpx;
		height: 298rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		background-color: white;
	}
	.wxpay{
		width: 630rpx;
		margin-left: 30rpx;
		height: 46rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}
	.wxpay1{
		width: 46rpx;
		height: 46rpx;
	}
	.pay-title{
		width: 546rpx;
		margin-left: 8rpx;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.wxpay2{
		width: 36rpx;
		height: 36rpx;
	}
	.footer{
		width: 690rpx;
		height: 120rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		background-color: white;
		display: flex;
		align-items: center;
	}
	.bottom-center{
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
	}
	.bottom-left{
		width: 372rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
		line-height: 24rpx;
	}
	.bottom-right{
		display: inline-block;
		width:258rpx;
		height: 24rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #CCCCCC;
	}
	.Btn{
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	.Btntitle{
		font-size: 24rpx;
		/* color: #192524; */
		width: 352rpx;
		height: 36rpx;
		line-height: 36rpx;
		margin-left: 30rpx;
	}
	.Btntitle1{
		font-size: 28rpx;
		color:black;
		width: 156rpx;
		height: 82rpx;
		line-height: 82rpx;
		/* margin-left: 30rpx; */
		text-align: center;
			border-radius: 44rpx;
		border: 1px solid #999999;
	}
	.Btntitle2{
		font-size: 28rpx;
		color:black;
		width: 184rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		/* background-color: #36BE6A; */
		/* border: 1px solid #999999; */
	
		border-radius: 44rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.botmodal{
		width: 100%;
		height: 100%;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%203482%402x.png') center/cover;
	}
	.modaltitle{
		font-size: 36rpx;
		color: #710D0D;
		font-weight: bold;
		margin-top: 90rpx;
		margin-left: 30rpx;
	}
	.boxmoadl{
		width: 690rpx;
		height: 174rpx;
		margin-top: 48rpx;
		margin-left: 30rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Rectangle%20948%402x.png') center/cover;
	}
	.boxtitle{
		width: 224rpx;
		height: 37rpx;
		margin-top: 26rpx;
		margin-left: 82rpx;
		font-size: 32rpx;
		color: #2C2C2C;
		font-weight: bold;
		position: relative;
	}
	.boxtitle::before{
		content: '';
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: -2rpx;
		left: -58rpx;
		border-radius: 50%;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%203477%402x.png') center/cover;
	}
	.boxconter{
		width: 576rpx;
		height: 72rpx;
		margin-top: 20rpx;
		margin-left: 82rpx;
		font-size: 24rpx;
		color: #3D3F41;
	}
	.Quanpp{
		width: 100%;
		min-height:700rpx;
		background-color: #F3F3F3;
	}
	.Quantitle{
		width: 100%;
		height: 28rpx;
		font-size: 32rpx;
		color: #101010;
		font-weight: bold;
		margin-top: 47rpx;
		text-align: center;
		line-height: 28rpx;
	}
	.Quantitle1{
		min-width: 410rpx;
		height: 22rpx;
		margin-top: 38rpx;
		margin-left: 30rpx;
		font-size: 24rpx;
		color: #3D3D3D;
	}
	.GoPayQuan{
		width: 100%;height: 136rpx;
		position: fixed;
		bottom: 0;
	}
	.GoPayQuan1{
		width: 690rpx;
		height: 88rpx;
		margin-left: 30rpx;
		margin-top: 24rpx;
		border-radius: 44rpx;
		background-color: #36BE6A;
		color: white;
		font-size: 32rpx;
		line-height: 88rpx;
		text-align: center;
	}
	.main {
		width: 694rpx;
		height: 194rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Subtract.png') center/cover;
		margin-left: 28rpx;
		margin-top: 30rpx;
		border-radius: 16rpx;
		position: relative;
	}
	
	.main-left {
		position: relative;
		width: 190rpx;
		height: 194rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Group%202759.png') center/cover;
		background-color: rgba(54, 190, 106, 0.95);
		border-radius: 16rpx;
	}
	
	.qiu1 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		left: 180rpx;
		z-index: 10;
	}
	
	.qiu2 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		bottom: -10rpx;
		left: 180rpx;
		z-index: 10;
	}
	
	.tx {
		width: 100%;
		height: 56rpx;
		position: absolute;
		top: 48rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 72rpx;
		color: white;
	}
	
	.tx1 {
		width: 100%;
		height: 18rpx;
		position: absolute;
		bottom: 48rpx;
		text-align: center;
		line-height: 18rpx;
		font-size: 20rpx;
		color: white;
	}
	
	.main-title {
		width: 160rpx;
		height: 32rpx;
		position: absolute;
		top: 28rpx;
		left: 214rpx;
		font-size: 32rpx;
		color: rgba(54, 57, 65, 1);
		font-weight: bold;
	}
	
	.main-time {
		width: 222rpx;
		height: 20rpx;
		position: absolute;
		top: 86rpx;
		left: 214rpx;
		font-size: 24rpx;
		color: rgba(122, 122, 122, 1);
	}
	
	.main-bottom {
		width: 96rpx;
		height: 22rpx;
		position: absolute;
		left: 214rpx;
		bottom: 30rpx;
		font-size: 24rpx;
		color: rgba(161, 161, 161, 1);
	}
	
	.main-img {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		bottom: 25rpx;
		left: 320rpx;
	}
	
	.main-btn {
		
		position: absolute;
		top: 68rpx;
		right: 40rpx;
	}
	.number{
		width: 630rpx;
		height: 40rpx;
		margin-top: 29rpx;
		display: flex;
		margin-left: 30rpx;
		align-items: center;
	}
	.numtitle{
		width: 112rpx;
		height: 24rpx;
		font-size:28rpx;
		color: black;
		line-height: 24rpx;
		
	}
	.num{
		width: 425rpx;
		height: 24rpx;
		text-align: right;
		font-size:28rpx;
		line-height: 24rpx;
		color: #999999;
	}
	.num-sp{
		width: 170rpx;
		height: 44rpx;
		text-align: center;
		line-height: 50rpx;
		color: #888888;
		font-size: 24rpx;
	}
	.numcopy{
		width: 80rpx;
		height: 40rpx;
		border-radius: 72rpx;
		background-color: #EFEFEF;
		font-size: 24rpx;
		color: black;
		text-align: center;
		line-height: 40rpx;
		margin-left: 5rpx;
	}
	.Returned{
		width: 152rpx;
		height: 52rpx;
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		
	}
</style>